.header {
    background-color: #383838;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 17px 0 16px 0;

    .header-left {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        margin-left: 20px;
        ._logo {
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            img {
                width: 40px;
                height: 40px;
            }

            div {
                display: flex;
                flex-direction: column;
                justify-content: start;
                align-items: center;
                margin-left: 6px;

                ._logo_title {
                    margin: 0;
                    padding: 0;
                    font-size: 26px;
                    font-weight: 500;
                    color: #FFFFFF;
                    font-family: PingFang-SC-Medium, PingFang-SC;
                    line-height: 28px;
                }

                ._logo__title {
                    font-size: 10px;
                    font-weight: 500;
                    color: #FFFFFF;
                    line-height: 14px;
                    letter-spacing: 2px;
                }
            }
        }
        ._menu{
            display: flex;
            align-items: center;
            a {
                font-size: 16px;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 22px;
                margin-left: 40px;
            }
        }
    }


    .header-right {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        ._search{
            svg {
                width: 24px;
                height: 25px;
                &:last-of-type {
                    fill: #fff;
                }
            }
        }
        ._message {
            position: relative;
            width: 21px;
            height: 26px;
            margin-left: 40px;

            .remind {
                position: absolute;
                right: 0px;
                top: 0px;
                width: 10px;
                height: 10px;
                background-color: #FF6545;
                border: 2px solid #fff;
                border-radius: 50%;
            }

            svg {
                width: 25px;
                height: 25px;
                &:last-of-type {
                    fill: #fff;
                }
            }
        }

        ._userImg {
            position: relative;
            width: 40px;
            height: 40px;
            border: 1px solid;
            margin-left: 40px;
            border-radius: 50%;
            overflow: hidden;
            img{
                width: 100%;
                height: 100%;
            }
        }

        ._btn {
            margin-left: 40px;
            margin-right: 20px;
            .upgrade-vip {
                font-weight: 400;
                font-size: 16px;
                line-height: 22px;
                background: #40A0FB;
                border-radius: 4px;
                color: #fff;
                padding:7px !important;
                outline: none;
                border-color: transparent; // 若是本身具有 border 请删除此属性
                box-shadow:none;
            }

        }

    }
    
}
.head_img_box{
    position: relative;
    cursor: pointer;
    .ant-popover{
        width: 318px !important;
        left: -100px !important;
        top: 50px !important;
        .ant-popover-inner{
            background: none;
            .user-info_bg{
                background-size: 100% !important;
                // background-position: 50% 50%;
                background-repeat: no-repeat !important;
                border-radius: 10px;
                overflow: hidden;
                .user-info{
                    position: relative;
                    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.8) 100%);
                    backdrop-filter: saturate(180%) blur(60px);
                    color: #000;
                    padding: 0 20px; 
                    ._info_identity{
                        display: flex;
                        flex-direction: row;
                        justify-content: space-between;
                        align-items: center;
                        padding-top: 57px;
                        ._basic{
                            display: flex;
                            flex-direction: row;
                            justify-content: space-between;
                            align-items: center;
                            ._avatar{
                                width: 62px;
                                height: 62px;
                                border-radius: 50%;
                                overflow: hidden;
                                border: 1px solid #ececec;
                                box-sizing: border-box;
                                img{
                                    width: 100%;
                                    height: 100%;
                                }
                            }
                            ._data{
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;
                                align-items: flex-start;
                                margin-left: 22px;
                                ._name{
                                    font-size: 24px;
                                    font-weight: bold;
                                    color: #383838;
                                    line-height: 33px;
                                }
                                ._type{
                                    font-size: 12px;
                                    font-weight: 500;
                                    color: #383838;
                                    line-height: 17px;
                                    margin-top: 7px;
                                }
                            }
                        }
                        ._checkout{
                            width: 24px;
                            height: 24px;
                        }
                    }
                    ._balance{
                        text-align: left;
                        margin-top: 40px;
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        .gold{
                            width: 30px;
                            height: 30px;
                            margin-right: 37px;
                            margin-left: 15px;
                        }
                        ._num{
                            font-size: 20px;
                            color: #383838;
                        }
                    }
                    ._user_menu{
                        display: flex;
                        flex-direction: row;
                        justify-content: flex-start;
                        align-items: center;
                        margin-top: 66px;
                        padding-left: 19px;
                        padding-bottom: 26px;
                        li{
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: center;
                            cursor: pointer;
                            img{
                                width: 28px;
                                height: 28px;
                                margin-bottom: 9px;
                            }
                            &:nth-child(1){
                                margin-right: 78px;
                            }
                            &:nth-child(2){
                                margin-right: 62px;
                            }
                        }
                    }
                }
            }
    
        }
    
    }

}